<template>
  <!-- <div> -->
      <!-- 博文 -->
      <q-card v-if="topic.articled"> 
          <q-item>
            <q-item-side :avatar="(topic.lz.logoRes || 'statics/hg-logo-head.png') | avatarView" 
                @click="$router.push('/personal/personal-home?customerId='+topic.lz.id)"/>
            <q-item-main>
              <q-item-tile label>{{topic.lz.nickname}}</q-item-tile>
              <q-item-tile sublabel>{{topic.createdDate | formatDateToTime}}</q-item-tile>
            </q-item-main>
             <q-item-side >
                <q-btn color="negative" small round icon="book">文</q-btn>
            </q-item-side>
          </q-item>
          <q-item>
                <q-item-tile label @click="toTopicDetail(topic.id)"><h5><a>{{topic.title}} </a></h5></q-item-tile>        
          </q-item>
          
          <q-card-main v-if="!isDetail" v-html="blogContent"></q-card-main>    
          <!-- 操作集 vertical 是否垂直 align 方向start,end,center .. -->
          <q-card-actions align="around">
            <q-btn flat round small :color="topic.liked ? 'teal': ''" @click="likedAction(topic)" icon="thumb_up">
              {{topic.likedcount | convertNum}}
            </q-btn>
            <q-btn flat round  small icon="message" @click="toTopicDetail(topic.id)">
              {{topic.replycount | convertNum}}
            </q-btn>
            <q-btn flat round small color="primary" @click="shareAction" icon="share"/>
          </q-card-actions>
          <q-card-separator style="height:3px"/>
          <!--底部内容 -->
          <slot name="details"></slot>
      </q-card>
      <!-- 说说 -->
      <q-card v-else>
         
          <q-item>
            <q-item-side :avatar="(topic.lz.logoRes || 'statics/hg-logo-head.png') | avatarView" 
                @click="$router.push('/personal/personal-home?customerId='+topic.lz.id)"/>
            <q-item-main>
              <q-item-tile label>{{topic.lz.nickname}}</q-item-tile>
              <q-item-tile sublabel>{{topic.createdDate | formatDateToTime}}</q-item-tile>
            </q-item-main>
            <q-item-side >
              <q-item-tile color="negative" icon="whatshot" v-if="topic.isHot"/>
              <q-btn outline small color="negative" @click="attentionAction(topic.lz.id)" v-if="topic.fans == false" >关注</q-btn>
            </q-item-side>
          </q-item>
        <!-- <transition
            appear
            enter-active-class="animated bounceInRight"
            leave-active-class="animated bounceInLeft"
            >
        </transition> -->
        
	    	<!-- 配图 -->
        <span style="" >
          <q-gallery-carousel dots infinite autoplay fullscreen :src="topic.attashments | attashView" v-if="isDetail"/>
          <q-gallery :src="topic.attashments | attashView" v-else/>
        </span>
		    <!-- 内容 -->
        <q-card-main v-if="isDetail"> {{topic.content | contentLengthEllipsis}}  </q-card-main>
        <q-card-main v-else> {{topic.content}}  </q-card-main>
        <q-card-separator />

        <!-- 操作集 vertical 是否垂直 align 方向start,end,center .. -->
        <q-card-actions align="around">
          <q-btn flat round small :color="topic.liked ? 'teal': ''" @click="likedAction(topic)" icon="thumb_up">
            {{topic.likedcount | convertNum}}
          </q-btn>
          <q-btn flat round  small icon="message" @click="toTopicDetail(topic.id)">
            {{topic.replycount | convertNum}}
          </q-btn>
          <q-btn flat round small color="red" v-if="topic.allowDel" @click="delDialog(topic.id)" icon="delete"/>
          <q-btn flat round small color="primary" @click="shareAction" icon="share"/>
        </q-card-actions>
        <q-card-separator style="height:3px"/>
        <!--底部内容 -->
	      <slot name="details"></slot>
      </q-card>
  <!-- </div> -->
  
</template>

<script>
import {
  QCard,
  QCardTitle,
  QCardActions,
  QCardSeparator,
  QCardMain,
  QItem,
  QItemMain,
  QItemSide,
  QItemTile,
  QBtn,
  QIcon,
  QGallery,
  QGalleryCarousel,
  ActionSheet,
  Dialog,
  Alert
} from "quasar";
import commonCompo from "../common-compo";
import topicApi from "../../../https/topicApi";
import attentionApi from "../../../https/attentionApi";
import collectApi from "../../../https/collectApi";
import reportApi from '../../../https/reportApi';
import Storage from '../../../utils/storage';

export default {
  components: {
    QCard,
    QCardTitle,
    QCardActions,
    QCardSeparator,
    QCardMain,
    QItem,
    QItemMain,
    QItemSide,
    QItemTile,
    QBtn,
    QIcon,
    QGallery,
    QGalleryCarousel,
    ActionSheet,
    Dialog,
    Alert
  },
  props: {
    isDetail: { type: Boolean, default: true },
    topic: { type: Object, default: { attashments: [] } },
    topicIndex: {type:Number,default:-1}
  },
  computed: {
    blogContent() {
      return this.escapeAndRmQuote(this.topic.content);
    }
  },
  methods: {
    escapeAndRmQuote(blogContent) {
      if(!blogContent) {
        return;
      }
      let str = decodeURIComponent(blogContent);
      str = str.replace(/\\/, '');
      if (str.startsWith('"')) {
          str = str.substring(1, str.length);
      }
      if (str.endsWith('"')) {
          str = str.substring(0, str.length - 1);
      }
      return str;
    },
    alertMsg(msg,_color) {
      if(!_color) {_color='warning'}
      if (msg) {
        const _errAlert = Alert.create({
          color: _color,
          icon: 'info',
          html: msg,
          position: 'bottom',
        });
         setTimeout(()=>{
          _errAlert.dismiss();
        },3000);
      }
    },
    likedAction(topic) {
      console.log('处理点赞：',topic);
      
      const _liked = topic.liked;
      if (_liked) {
        //取消
        this.alertMsg('您已经赞过了')
        // topic.liked = false;
        // topic.likedcount--;
        // topicApi
        // .likedCancel(topic.id)
        // .then(res => {
        //   console.log("取消点赞");
        // })
        // .catch(err => {});
      } else {
        //点赞
        topic.liked = true;
        topic.likedcount++;
        topicApi
          .liked(topic.id)
          .then(res => {
            console.log("点赞帖子");
          })
          .catch(err => {});
      }
    },
    delDialog(id) {
      //删除对话框，索引
      const _this = this;
      Dialog.create({
        title: "警告",
        message: '删除后，数据不可恢复，您确定要继续嘛?',
        position: "right",
        buttons: [
          {
            label: "确定",
            color: "negative",
            raised: true,
            handler() {
              if(id) {
                console.log('删除topic-id:',id);
                _this.$emit('topic-delete',_this.topicIndex)
                topicApi
                  .delete(id)
                  .then(res => {
                  })
                  .catch(err => {});
              }
            }
          },
          {
            label: "取消",
            outline: true,
            handler() {
              console.log("取消删除");
            }
          }
        ]
      });
    },
    reportDialog() {
      //删除对话框，索引
      const _this = this;
      const {lz,content,id} = _this.topic;
      if(lz.id == Storage.curuserId()) {
        _this.alertMsg('您不能举报您自己')
        return false;
      }
      Dialog.create({
        title: "提示:请勿随意操作",
        message: '您确定举报：['+lz.nickname+']发布的内容，包含非法不良信息嘛？',
        position: "bottom",
        buttons: [
          {
            label: "确定",
            color: "negative",
            raised: true,
            handler() {
              const _params = {reportType:'TOPIC',targetuser:lz,message:'非法信息',targetContent:content,topicId:id};
              reportApi.add(_params).then(res=>{
                if(res.status == 200) {
                  _this.alertMsg('感谢您的反馈，系统会及时处理','green')
                }
              })
            }
          },
          {
            label: "取消",
            outline: true,
            handler() {
              console.log("取消举报");
            }
          }
        ]
      });
    },
    attentionAction(lzid) {
      console.log("发起关注：", lzid);
      if (lzid) {
        attentionApi
          .add({ toId: lzid })
          .then(res => {
            if(res.status == 200) {
              this.topic.fans=true;
            }
          })
          .catch(err => {});
      }
    },
    // 添加收藏
    collectAction(topicId) {
      console.log("发起收藏：", topicId);
      if (topicId) {
        collectApi
          .add({ topicId: topicId })
          .then(res => {
            if(res.status == 200) {
               this.alertMsg('收藏成功','positive')
            }
          })
          .catch(err => {});
      }
    },
    collectCancelAction(topicId) {
      console.log("取消收藏：", topicId);
      if (topicId) {
        collectApi
          .cancel({ topicId: topicId })
          .then(res => {
            if(res.status == 200) {
            }
          })
          .catch(err => {});
      }
    },
    //TODO 分享操作
    shareAction() {
      //分享操作
      const self = this;
      ActionSheet.create({
        gallery: true,
        actions: [
          {
            label: "好友",
            icon: "person",
            handler() {
               self.alertMsg('暂时未开放该功能，敬请期待','blue')
            }
          },
          {
            label: "收藏",
            color: 'negative',
            icon: "favorite",
            handler() {
              console.log('收藏:',self.topic.id)
              self.collectAction(self.topic.id);
            }
          },
          {
            label: "举报",
            icon: "report problem",
            color: "red",
            handler() {
              self.reportDialog();
            }
          }
        ],
        dismiss: {
          label: "Cancel",
          handler() {}
        }
      });
    },
    toTopicDetail(topicId) {
      //查看主题的回复
      this.$router.push("/community/topic-detail?topicId=" + topicId);
    }
  }
};
</script>

